<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
<title>小世界 · 大历史</title>
<meta charset="UTF-8" />
<meta name="viewport"
	content="initial-scale=1.0,user-scalable=no,minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="小世界，大历史，历史人文,安静阅读，回归文字" />
<meta name="description" content="小世界，大历史，历史人文,安静阅读，回归文字" />

<link rel='stylesheet' id='puma-css'
	href='${pageContext.request.contextPath }/css/word/history/bundle.css?ver=2.1.9'
	type='text/css' media='screen' />
<link rel='stylesheet' id='fancyratings-css'
	href='${pageContext.request.contextPath }/css/word/history/style.css?ver=1.0.0'
	type='text/css' media='all' />

<script type='text/javascript'
	src='${pageContext.request.contextPath }/js/jquery.min.js?ver=1.12.4'></script>
<!-- <script type='text/javascript'
	src='${pageContext.request.contextPath }/js/index.js?ver=1.0.0'></script> -->
<script type='text/javascript'
	src='${pageContext.request.contextPath }/js/baidu.js'></script>
</head>


<script type="text/javascript">
	var preWord;
	function aa(e) {
		var value = event.target.value;

		if (value == "" || value == null) {
			$("#suggest ul").html("");
			$("#suggest").css("display", "none");
		}

		if (preWord != value && value != null && value != "") {
			$.ajax({
				url : "${pageContext.request.contextPath}/suggest/" + value,
				success : function(result) {

					data = result.data
					if (data != null) {
						$("#suggest").css("display", "block");
						var ul = $("#suggest ul");
						ul.html("");
						for (index in data) {
							ul.append(" <li >" + data[index] + "</li>");
						}
						ul.css("float", "left");
						ul.css("list-style-type", "none");
						$("#suggest").css("border-top", "0px");

						var li = $("#suggest ul li");
						li.css("margin", "0");
						li.css("padding", "0");
						li.css("text-align", "left");
						li.css("width", "100%");

						$(".search-field").css("border-button", "0px");
						li.attr("onclick", "use(this);");
					}
				}
			});
		}
		preWord = value;
	}
	/*给输入框赋值，隐藏提示词*/
	function use(object) {
		var text = $(object).text();
		$(".search-field").val(text);
		location.href = "${pageContext.request.contextPath}/h/s?w=" + text;
	}
	document.onkeydown = function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if (e && e.keyCode == 13) { // enter 键
			//要做的事情
			search();
		}
	};

	function search() {
		location.href = "${pageContext.request.contextPath}/h/s?w="
				+ $(".search-field").val();
	}
</script>
<body
	class="post-template-default single single-post postid-2116 single-format-standard">
	<div class="surface-content">
		<header id="site-header" class="u-textAlignCenter container">
			<div class="header-inner">
				<h1 class="site-title">
					<a href="#" title="小世界">小世界</a>
				</h1>
				<div class="">
					<div role="search" method="get" class="search-form is-active"
						action="">
						<input type="search" class="search-field" placeholder="输入关键词吧 …"
							oninput="aa(event)" onporpertychange="aa(event)"> </label>
						<div class="icon-search-div" onclick="search()">
							<span class="icon-search" style="line-height: 2.5;"> </span>
						</div>
						<div id="suggest" style="display: none">
							<ul style="float: left">
							</ul>
						</div>
						<style>
#suggest {
	width: 456px;
	float: left;
	border-bottom: 2px rgba(255, 255, 255, .95) solid;
	border-left: 2px rgba(255, 255, 255, .95) solid;
	border-right: 2px rgba(255, 255, 255, .95) solid;
}
</style>
					</div>
				</div>

				<style>
.search-form {
	border-bottom: 0px rgba(255, 255, 255, .95) solid;
	width: 500px;
	color: black !important;
}

li:hover {
	background: white;
}

ul {
	width: 100%;
}

li {
	width: 135px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#site-header {
	background-position: center center;
	background-size: cover;
	background-origin: border-box;
	background-color: #DDDDDD;
	position: relative;
	color: #766048;
	box-sizing: border-box;
	padding-bottom: 200px;
	padding-top: 140px;
}

.icon-search-div {
	float: right;
	height: 36px;
	width: 36px;
	background-color: rgba(245, 180, 9, 0.76);
	border: 2px rgba(255, 255, 255, .95) solid;
}

.search-field {
	border: 0;
	font-size: 20px;
	height: 40px;
	width: 460px;
	border: 2px rgba(255, 255, 255, .95) solid;
	/**color: rgba(255, 255, 255, .95);*/
	color: black !important;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #7D7D7D;
	opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #7D7D7D;
	opacity: 1;
}

ul, menu, dir {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
	list-style: none;
}

input:-ms-input-placeholder {
	color: #7D7D7D;
	opacity: 1;
}

input::-webkit-input-placeholder {
	color: #7D7D7D;
	opacity: 1;
}
</style>
				<script type="text/javascript">
					var h = $(window).width();

					if ($("div.surface-content").width() < $(".search-form")
							.width()) {
						$(".search-form").css("max-width", "80%");
						$(".search-field").css("width", "80%");
					}
					$("#site-header").css("padding-bottom",
							(document.body.offsetHeight - 100) + "px");
				</script>

			</div>
		</header>

		<div class="site-footer u-textAlignCenter container">blog since
			2013</div>
		<style>
.site-footer {
	background-color: #DDDDDD;
	margin-top: 0px;
}
</style>
	</div>
	<div class="back-to-top u-hide" onclick="backToTop();">
		<span class="icon-circle-up"></span>
	</div>
	<div class="u-hide"></div>

</body>
</html>